<script setup lang="ts">
import { User } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue';
import { reqDoctorInfo, reqGetUser } from '@/apis/hospital';
import { DoctorInfoData, UserArr, UserResponseData } from '@/apis/hospital/type';
import { useRoute, useRouter } from 'vue-router';
import { reqSubmitOrder } from '@/apis/user';
import { SubmitOrder } from '@/apis/user/type';
import { ElMessage } from 'element-plus';

const docInfo = ref<any>({})
const userArr = ref<UserArr>([])
const currentIndex = ref<number>(-1)
const $route = useRoute();
const $router = useRouter();

onMounted(() => {
  fetchUserData()
  fetchDocData()
})

// 获取就诊人信息
const fetchUserData = async () => {
  const res: UserResponseData = await reqGetUser()
  console.log(res)
  if (res.code === 200) {
    userArr.value = res.data
  }
}

const fetchDocData = async () => {
  const res: DoctorInfoData = await reqDoctorInfo($route.query.docId as string)
  if (res.code === 200) {
    docInfo.value = res.data
  }
}

const changeIndex = (index: number) => {
  currentIndex.value = index
}

// 提交订单并跳转
const submitOrder = async () => {
  const res: SubmitOrder = await reqSubmitOrder(
    docInfo.value.hoscode,
    docInfo.value.id,
    userArr.value[currentIndex.value].id
  )
  if (res.code === 200) {
    $router.push({ path: '/user/order', query: { orderId: res.data } })
  } else {
    ElMessage({
      type: "error",
      message: res.message
    })
  }
}

const goUser = () => {
  $router.push({ path: '/user/patient', query:{type: 'add'}})
}
</script>



<template>
  <div class="container">
    <div class="tip">确认挂号信息</div>
    <el-card class="box_card">
      <template #header>
        <div class="card-header">
          <span>请选择就诊人</span>
          <el-button type="primary" size="default" :icon="User" style="background-color: #28d17c" @click="goUser">添加就诊人</el-button>
        </div>
      </template>    
      <div class="user">
        <visitor @click="changeIndex(index)" class="item" v-for="(item, index) in userArr" :key="item.id" :user="item"
        :index="index" :currentIndex="currentIndex"></visitor>
      </div>
    </el-card>
    <el-card class="box_card">
      <template #header>
        <div class="card-header">
          <span>挂号信息</span>
        </div>
      </template>
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              就诊日期
            </div>
          </template>
          {{ docInfo.workDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              就诊医院
            </div>
          </template>
          {{ docInfo.param?.hosname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              就诊科室
            </div>
          </template>
          {{ docInfo.param?.depname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医生姓名
            </div>
          </template>
          {{ docInfo.docname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医生职称
            </div>
          </template>
          {{ docInfo.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医生专长
            </div>
          </template>
          {{ docInfo.skill }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医事服务费
            </div>
          </template>
          {{ docInfo.amount }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="btn">
      <el-button type="primary" size="default" style="width: 120px;" :disabled="currentIndex === -1"
        @click="submitOrder">确认挂号</el-button>
    </div>
  </div>
</template>



<style scoped lang="scss">
.container {
  margin-top: 30px;

  .tip {
    font-weight: 400;
    color: #7f7f7f;
    font-size: 20px;
  }

  .box_card {
    margin: 20px 0;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .user {
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;

      .item {
        width: 32.5%;
        margin: 10px 7px 0 0;
      }
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    margin: 10px 0;
  }
}
</style>